<template>
  <div class="parkingSimulator-page">
    <breadcrumb />
    <div class="table-container">
      <div class="simulator">
        <h3>路边停车模拟器</h3>
        <el-form ref="addFormRef" :rules="rules" :model="addForm.data" label-width="120">
          <el-form-item label="场景">
            <el-radio-group v-model="addForm.data.scene">
              <el-radio v-for="item in scene.data" :key="item.id" :value="item.id">{{
                item.name
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="泊位号" prop="berthCode">
            <el-input
              v-model="addForm.data.berthCode"
              style="width: 320px"
              placeholder="请输入泊位号"
            />
          </el-form-item>
          <div v-if="addForm.data.scene === 2">
            <el-form-item label="车辆类型" prop="carType">
              <el-radio-group v-model="addForm.data.carType">
                <el-radio v-for="item in carType.data" :key="item.id" :value="item.id">{{
                  item.name
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="车牌号" prop="licensePlate">
              <el-input
                v-model="addForm.data.licensePlate"
                style="width: 320px"
                placeholder="请输入车牌号"
              />
            </el-form-item>
            <el-row>
              <el-form-item label="车牌号码" prop="licensePlateImgFileId">
                <el-upload
                  :file-list="addForm.data.image"
                  action="importUrl"
                  list-type="text"
                  :limit="1"
                  size="small"
                  :show-file-list="true"
                  :before-upload="beforeAvatarUpload"
                  :on-change="fileListUpLoad"
                  :disabled="disable"
                >
                  <el-button type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="泊位+车牌" prop="berthLicensePlateImgFileId">
                <el-upload
                  :file-list="addForm.data.image2"
                  action="importUrl"
                  list-type="text"
                  :limit="1"
                  size="small"
                  :show-file-list="true"
                  :before-upload="beforeAvatarUpload"
                  :on-change="fileListUpLoad2"
                  :disabled="disable"
                >
                  <el-button type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-row>
            <el-form-item label="收费员账号" prop="inPdaUser">
              <!-- <el-input
                v-model="addForm.data.inPdaUser"
                style="width: 320px"
                placeholder="请输入收费员账号"
              /> -->

              <el-select
                v-model="addForm.data.inPdaUser"
                style="width: 320px"
                placeholder="请选择设备类型"
              >
                <el-option
                  @click="getInPdaUserData(item)"
                  v-for="item in inPdaUser.data"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item>
            <div class="footer">
              <div></div>
              <div>
                <el-button class="reset-btn" @click="resetForm(addFormRef)"
                  >重 置</el-button
                >
                <el-button class="confirm-btn" @click="submitForm(addFormRef)"
                  >确 认</el-button
                >
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import breadcrumb from "@/components/breadcrumb/index.vue";
import { ref, reactive } from "vue";
import { getEntering, getRegister, getDriveOut, getUpload } from "./request.js";
import { getTollmanList } from "@/service/modules/publicModule";
const importUrl = ref("https://cipp.ecaray.com/file/upload");

const scene = reactive({
  data: [
    {
      id: 1,
      name: "驶入",
    },
    {
      id: 2,
      name: "登记",
    },
    {
      id: 3,
      name: "驶出",
    },
  ],
});

const carType = reactive({
  data: [
    {
      id: 1,
      name: "大型车",
    },
    {
      id: 2,
      name: "小型车",
    },
    {
      id: 3,
      name: "新能源",
    },
    {
      id: 4,
      name: "特殊车辆",
    },
  ],
});

const inPdaUser = reactive({
  data: [],
});

const getInPdaUserData = (item) => {
  console.log("item ===>", item);
  addForm.data.optUser = item.id;
  addForm.data.pdaUser = item.name;
};

const addFormRef = ref("");
const addForm = reactive({
  data: {
    scene: 2,
    channel: 2,
  },
});

const rules = reactive({
  berthCode: [{ required: true, message: "请输入泊位号", trigger: "blur" }],
  carType: [{ required: true, message: "请输入车辆类型", trigger: "blur" }],
  licensePlate: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
  inPdaUser: [{ required: true, message: "请输入收费员账号", trigger: "blur" }],
  licensePlateImgFileId: [{ required: true, message: "请上传车牌图片", trigger: "blur" }],
  berthLicensePlateImgFileId: [
    { required: true, message: "请上传车牌图片", trigger: "blur" },
  ],
});

const formData = async () => {
  await getTollmanList().then((res) => {
    inPdaUser.data = res.data.result;
  });
};

formData();

// 上传图片
const disable = ref(false);
const beforeAvatarUpload = (file) => {
  console.log("11 ===>", 11);
  return new Promise(async (resolve, reject) => {
    // console.log(file);
    // 验证文件大小
    if (
      file.type !== "image/jpeg" &&
      file.type !== "image/png" &&
      file.type !== "image/jpg"
    ) {
      ElMessage.error("所上传图片类型不支持");
      reject();
    } else if (file.size / 1024 > 100) {
      ElMessage.error("所上传图片不能超过100KB");
      reject();
    }
  });
};

const fileListUpLoad = (uploadFile) => {
  //   console.log("uploadFile ===>", uploadFile);
  const fileSize = uploadFile.size / 1024;
  if (fileSize < 100) {
    getUpload({
      file: uploadFile.raw,
      fileType: "img",
      bucket: "cipp-road-park-img",
      tags: "路边停车车牌号码",
    }).then((res) => {
      console.log("res ===>", res);
      addForm.data.licensePlateImgFileId = res.data.result.id;
      addForm.data.licensePlateImg =
        res.data.result.bucket + "/" + res.data.result.filePath;
    });
  } else {
    return false;
  }
};

const fileListUpLoad2 = (uploadFile) => {
  //   console.log("uploadFile ===>", uploadFile);
  const fileSize = uploadFile.size / 1024;
  if (fileSize < 100) {
    getUpload({
      file: uploadFile.raw,
      fileType: "img",
      bucket: "cipp-road-park-img",
      tags: "路边停车泊位+车牌",
    }).then((res) => {
      console.log("res ===>", res);
      addForm.data.berthLicensePlateImgFileId = res.data.result.id;
      addForm.data.berthLicensePlateImg =
        res.data.result.bucket + "/" + res.data.result.filePath;
    });
  } else {
    return false;
  }
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      //   console.log("addForm.data ===>", addForm.data);
      if (addForm.data.scene === 1) {
        getEntering(addForm.data).then((res) => {
          //   console.log("res ===>", res);
          if (res.data.code === 0) {
            ElMessage({
              type: "success",
              message: res.data.result,
            });
          } else {
            ElMessage({
              type: "error",
              message: res.data.msg,
            });
          }
        });
      } else if (addForm.data.scene === 2) {
        getRegister(addForm.data).then((res) => {
          if (res.data.code === 0) {
            ElMessage({
              type: "success",
              message: "登记成功",
            });
          } else {
            ElMessage({
              type: "error",
              message: res.data.msg,
            });
          }
        });
      } else {
        getDriveOut(addForm.data).then((res) => {
          if (res.data.code === 0) {
            ElMessage({
              type: "success",
              message: res.data.result,
            });
          } else {
            ElMessage({
              type: "error",
              message: res.data.msg,
            });
          }
        });
      }
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  addForm.data = {};
  formEl.resetFields();
};
</script>

<style lang="less" scoped>
.table-container {
  margin-top: 16px;
  min-height: 100%;
  padding: 24px;
  background: #fff;
  border-radius: 6px;
  display: flex;
}
.simulator {
  text-align: center;
  margin: 0 auto;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
